<template>
    <div>
        <!-- 头部部分 -->
        <div class="div1" v-show="isShow == 1 ">
            <el-button class="b1" type="primary" :disabled="single" size="mini" @click="handle()">批量审批</el-button>  
            <span> 状态: </span>
            <el-select v-model="searchInfo.searchAApprovalState"  size="mini" style="width:120px">
              <el-option value = "0" label="全部" ></el-option>
              <el-option 
              v-for="dict in dict.type.al_state"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
              ></el-option>
            </el-select>
            <el-input class="in1" prefix-icon="el-icon-search" v-model="searchInfo.searchGoodsName"   placeholder="请输入办公用品名称" style="width:155px" size="mini"></el-input>
            <el-button type="primary" class="searchBtn" @click="searchBtn()" size="mini" >查询</el-button>
        </div>
       <!-- 主体部分 -->
    <div class="div2"  v-show="isShow == 1">
        <el-table v-loading="loading" :data="pageGoodsApply.list" @selection-change="handleSelectionChange">
            <el-table-column type="selection"  width="55" align="center"/>
            <el-table-column label="申领人" prop="nickName" :show-overflow-tooltip="true" />
            <el-table-column label="申领物品" prop="goodsName" :show-overflow-tooltip="true"/>
            <el-table-column label="规格型号" prop="aGoodsType" :show-overflow-tooltip="true" />
            <el-table-column label="使用方式" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.aUseType|filterGender}}</span>
                </template>
            </el-table-column>
            <el-table-column label="申领数量" prop="aNumber" :show-overflow-tooltip="true" />
            <el-table-column label="日期" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.aUseType == '1'">
                        <span>{{scope.row.aApplyTime|filterDateFormat1}}/{{scope.row.aReturnTime|filterDateFormat1}}</span>
                    </span>
                    <span v-if="scope.row.aUseType == '2'">
                        <span>{{scope.row.aApplyTime|filterDateFormat1}}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="状态" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span
                    v-for="dict in dict.type.al_state"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    v-if="dict.value == scope.row.aApprovalState"
                    >{{dict.label}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-row>
                        <el-button
                            size="mini"
                            type="text"
                            @click="tabChange(3,scope.row)"
                            v-hasPermi="['system:notice:edit']"
                            >详情</el-button>
                        <el-button
                            v-if="scope.row.aApprovalState == '1' "
                            size="mini"
                            type="text"
                            @click="adoptGoodsApproval(scope.row)"
                            v-hasPermi="['system:notice:edit']"
                            >通过</el-button>
                        <el-button
                            v-if="scope.row.aApprovalState == '1' "
                            size="mini"
                            type="text"
                            @click="rejectGoodsApply(scope.row)"
                            v-hasPermi="['system:notice:edit']"
                            >驳回</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        
        <pagination
        v-show="total>0"
        :total="total"
        :page.sync="pageGoods.pageNum"
        :limit.sync="pageGoods.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="listGoods"
        />
    </div>


    <!--详情 -->
    <div v-show="isShow == '3'" class="detailDiv">
        <el-descriptions class="margin-top" :column="2" size="small" border>
                <el-descriptions-item>
                    <template slot="label">
                        申领日期
                    </template>
                    <span>{{goodsApply.aApplyTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申领部门
                    </template>
                    <span>{{goodsApply.aDeptId}}</span>
                </el-descriptions-item>d
                <el-descriptions-item>
                    <template slot="label">
                        申领物品
                    </template>
                    <span>{{goodsApply.goodsName}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        规格-型号
                    </template>
                    <span>{{goodsApply.aGoodsType}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        使用方式
                    </template>
                    <span>
                        {{goodsApply.aUseType|filterGender}}
                    </span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        当前库存
                    </template>
                    <span>{{goodsApply.aCurrentNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申领数量
                    </template>
                    <span>{{goodsApply.aNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        领取日期
                    </template>
                    <span>{{goodsApply.aGetTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item v-if="goodsApply.aUseType == '1'">
                    <template slot="label">
                        归还日期
                    </template>
                    <span>{{goodsApply.aReturnTime|filterDateFormat1}}</span>
                </el-descriptions-item>
                <el-descriptions-item> 
                    <template slot="label">
                        审批人
                    </template>
                    <span>{{goodsApply.aNumber}}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        备注
                    </template>
                    <span>{{goodsApply.aRemarks}}</span>
                </el-descriptions-item>
        </el-descriptions>
        <div class="divbtn1">
            <el-button class="but" @click="tabChange(1,goodsApplyNull)" size="mini">返回</el-button>
        </div>
    </div>

    <!-- 驳回 -->
    <div>
        <el-dialog title="办公用品申领驳回说明" :visible.sync="open">
            <el-input v-model="goodsApply.aApprovalRejectReason" type="textarea"></el-input>
            <template slot="footer">
                <el-button type="primary" @click="bthSaveRejectGoodsApply()" >确定</el-button>
                <el-button @click="bthClosRejectGoodsApply()">关闭</el-button>
            </template>
        </el-dialog>
    </div>
   
</div>
</template>

<script>
import { goodsList , deleteGoods , getByIdGoods } from "@/api/administration/goods/goods";
import { listAll , saveGoodsApply , updateAState , updateGoodsApproval , saveRejectGoodsApply ,goodsApprovalBatchPass} from "@/api/administration/goodsApply/goodsApply";
import { getCurrentUser } from "@/api/system/user";
import { getByIdDept } from "@/api/system/dept";
import { getToken } from "@/utils/auth";
export default {
    name: 'RuoyiUiIndex',
    dicts:['al_state','goods_user_type','a_approver_id'],
    data() {
        return {
            searchInfo:{
                searchAApprovalState:'',
                searchGoodsName:'',
            },
            pageGoodsApply:{
                pageNum:1,
                pageSize:8,
            },
            total:0,
            goodsApply:{
                aGoodsType:'',
                aUseType:'',
                aApprovalRejectReason:'',
                aCurrentNumber:'',
                aApprovalState:'',
                aApplyTime:'',
                aApproverId:'',
                aGetTime:'',
            },
            loading:true,
            isShow: 1,
            pageGoods:{
                pageNum:1,
                pageSize:8,
                list:[],
            },
            flag:false,
            goodsApplyInfo:{
                useType:'',
                userName:'',
                deptName:'',
            },
            goodsApplyNull:{},
            isShows:0,
            single:true,
            batchPassMap:[],

            multipleSelection:[],
            ids:[],
            goods:{},
            open:false,
            // importUrl: administration/goods/importExcel",
            importUrl: process.env.VUE_APP_BASE_API + "/administration/goods/importExcel",
            headers: { Authorization: "Bearer " + getToken() },
        };
    },

    mounted() {
        this.listGoodsApplyList();
    },

    methods: {
        //批量审批
        handle(){
            this.$confirm('是否批量通过?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                goodsApprovalBatchPass(this.batchPassMap).then(rel=>{
                    this.$message({
                    type: 'success',
                    message: rel.msg,
                });
                })
            }).catch(() => {  
                this.$message({
                    type: 'success',
                    message: '取消'
                });
            });
        },
        // 批量审批
        handleSelectionChange(selection) {
            this.batchPassMap = selection;
            console.log(this.batchPassMap);
            this.single = !selection.length;
        },

        //申领物品列表
        listGoodsApplyList(){
            this.loading = true;
            this.goodsApply.pageNum = this.pageGoodsApply.pageNum;
            this.goodsApply.pageSize = this.pageGoodsApply.pageSize;
            this.goodsApply.goodsName = this.searchInfo.searchGoodsName;
            this.goodsApply.aState = this.searchInfo.searchAState;
            this.goodsApply.aUseType = this.searchInfo.searchAUseType;
            this.goodsApply.aApprovalState = this.searchInfo.searchAApprovalState;
            listAll(this.goodsApply).then(rel=>{                             
                if(rel.code == 200){
                    console.log(rel.data.list);
                    this.pageGoodsApply = rel.data;
                    this.total = rel.data.total;
                    this.loading = false;
                }
            })
        },
        //点击通过修改审批状态位
        adoptGoodsApproval(row){
            this.$confirm('是否通过申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.goodsApply = row;
                this.goodsApply.aApprovalState = '2';
                this.goodsApply.aState = '2';
                updateGoodsApproval(this.goodsApply).then(rel=>{
                    if(rel.code == 200){
                        this.$message({
                            type: 'success',
                            message: '审批通过'
                        });
                        this.listGoodsApplyList()
                    }
                })
              
            }).catch(() => {  
                this.$message({
                            type: 'success',
                            message: '取消'
                });
                this.listGoodsApplyList();
            });
            
        },
        //多条件搜索
        searchBtn(){
            this.pageGoodsApply.pageNum = 1;
            this.listGoodsApplyList();
        },
        //驳回
        rejectGoodsApply(row){
            this.goodsApply = row;
            this.open = true;
        },
        //保存驳回信息
        bthSaveRejectGoodsApply(){
            saveRejectGoodsApply(this.goodsApply).then(rel=>{
                if(rel.code == 200){
                    this.open = false;
                    this.listGoodsApplyList();
                    this.$message({
                        type: 'success',
                        message: rel.msg,
                    });
                }
            })
        },
        //取消填写驳回信息
        bthClosRejectGoodsApply(){
            this.$message({
                    type: 'success',
                    message: '取消驳回',
                });
            this.goodsApply = {};
            this.open = false;
        },


        //点击申请办公
        btnSaveGoodsApply(){
            this.isShow = 2;
            this.isShows = 1;
            this.listGoods();
            this.goodsApply.aGetTime = this.getNowTime();
            this.goodsApply.aApplyTime = this.getNowTime();
            this.goodsApply.aReturnTime = this.getNowTime();
            getCurrentUser().then(rel=>{
                this.goodsApplyInfo.userName = rel.data.user.nickName;
                this.goodsApply.aUserId = rel.data.userId;
                this.goodsApply.aDeptId = rel.data.deptId;
            })
            this.getDeptName();
        },
        getDeptName(){
            getByIdDept().then(rel=>{
                this.goodsApplyInfo.deptName = rel.data.deptName;
            })
        },
        //获取领用物品信息
        listGoods(){
            this.loading = true;
            this.goods.goodsName = this.searchInfo.searchGoodsName;
            this.goods.pageNum = this.pageGoods.pageNum;
            this.goods.pageSize = this.pageGoods.pageSize;
            goodsList(this.goods).then(rel=>{
                this.pageGoods = rel.data;
                this.total = rel.data.total;
                this.loading = false;
            })
        },
        //取消申领物品
        removeSaveGoodsApply(){
            this.isShow = 1;
            this.goodsApply = {
                aGoodsType:'',
                aUseType:'',
                aCurrentNumber:'',
                aApplyTime:'',
                aApproverId:'',
                aGetTime:'',
            };
        },
        //点击所选申领物品
        getGoodsApplyInfo(row){
            this.goods.goodsId = row;
            getByIdGoods(this.goods).then(rel=>{
                if(rel.code == 200){
                    this.goodsApply.aGoodsType = rel.data.goodsType;
                    this.goodsApply.aApproverId = '101';
                    this.goodsApplyInfo.useType = rel.data.goodsUserType == '1'?'借用':'领用';
                    this.goodsApply.aUseType = rel.data.goodsUserType;
                    this.goodsApply.aCurrentNumber = rel.data.goodsRemainderNumber;
                    this.flag = true;
                }
            })
        },
        //保存申领物品
        isSaveGoodsApply(){
            saveGoodsApply(this.goodsApply).then(rel=>{
                if(rel.code == 200){
                    this.isShow = '1';
                    this.goodsApply = {};
                    this.listGoodsApplyList();
                    this.$modal.msgSuccess("添加成功");
                }
            })
        },
        //点击详情
        tabChange:function(e,row){
            this.goodsApply = row;
            this.isShow = e;
		},
        //取消申领
        cancelGoodsApply(row){
            this.$confirm('是否取消申领?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.goodsApply = row;
                this.goodsApply.aState = '5';
                updateAState(this.goodsApply).then(rel=>{
                    if(rel.code == 200){
                        this.$message({
                            type: 'success',
                            message: '取消申领成功!'
                        });
                        this.listGoodsApplyList()
                    }
                })
              
            }).catch(() => {  
                this.listGoodsApplyList();
            });
        },
        //编辑申领物品
        editGoodsApply(row){
            this.isShow = 2;
            this.goodsApply = row;
            this.goodsApply.aApproverId = '101';
            this.goodsApplyInfo.useType = row.aUseType== '1'?'借用':'领用';
            this.flag = true;
            this.listGoods();
            this.isShows = 2;
        },


        /**
         * 公共方法获取时间
         */
        getNowTime() {
            var now = new Date();
            var year = now.getFullYear(); //得到年份
            var month = now.getMonth(); //得到月份
            var date = now.getDate(); //得到日期
            var hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
            month = month + 1;
            month = month.toString().padStart(2, "0");
            date = date.toString().padStart(2, "0");
            var defaultDate = `${year}-${month}-${date}`;
            console.log(defaultDate)
            return defaultDate;
            this.$set(this.info, "stockDate", defaultDate);
        },




        // 展示物品管理信息
        // 新增办公物品
        saveGoods(){
            this.$router.push("/save");
        },
        //修改办公物品
        goodsUpdate(row){
            this.$router.push({ 
                path: '/save', 
                query: {
                            goodsId: row.goodsId,
                            flag : 0
                        }
            })
        },
        //删除办公物品
        goodsDelete(row){
            const goodsIds = row.goodsId;
            this.goods.goodsId = goodsIds;
            this.goods.delFlag = 2;
            this.$confirm('是否确认删除物品名称为'+ row.goodsName +'的数据项?').then((rel)=>{
                deleteGoods(this.goods).then(rel=>{
                    if(rel.code >= 200){
                        this.$modal.msgSuccess("删除成功");
                    }
                })
            }).catch(()=>{
                this.$modal.msgSuccess("取消删除");
            }).finally(()=>{
                this.listGoods();
            })
        },
        //多条件查询
        submitSerch(){
            this.pageGoods.pageNum = 1;
            this.listGoods();
        },
        //查看详情
        lookGoods(row){
            this.$router.push({ 
                path: '/save', 
                query: {
                            goodsId: row.goodsId,
                            flag : 1
                        }
            })
        },
        //点击导入
        BtnimportTheFile(){
            this.open = true;
        },
        //导入
        submitUpload(){
            this.$refs.upload.submit();
        },
        //上传成功钩子
        uploadSuccess(response, file, fileList){
            this.open = false;
            this.listGoods();
            this.$message({
                message: response.msg,
                type: 'success'
            })
        },
        //导出
        handleExport(){
            this.download('administration/goods/export',{...this.pageGoods}, `goods_${new Date().getTime()}.xlsx`)
        },
    },

    filters: {
        filterGender(val) {
            if (val == "2") {
                return "领用";
            } else if (val == '1') {
                return "借用";
            }
        },
        filterSorts(val){
            if(val == "1"){
                return "办公消耗品";
            } else {
                return "办公设备";
            }
        },
        filterDateFormat1(srcVal){
            if(!srcVal){
                return "";
            }
            return srcVal.substr(0,19).replace("T", " ");
        },
    },
};
</script>

<style lang="scss" scoped>
    .div1 .b1{
        margin: 10px 65% 10px 32px;   
    }
    .div1 span{
        font-size : 12px;
    }
    .div1 .in1{
        margin: 0px 0px 0px 20px;
    }
    .div2{
        width: 95%;
        margin:20px;
    }
    .inp1{
        width:450px;
    }
    .divP{
        width:600px;
        height:100px;
    }
    .divP p{
        float:left;
        margin-right:10px;
    }
    .searchBtn{
        margin:0px 0px 0px 15px;
    }
    .saveDiv .saveDiv1{
        width: 600px;
        margin:20px 0px 20px 122px;
    }
    .saveDiv .saveDiv1 span{
        font-size:14px;
        font-weight:bold;
    }
    .saveDiv .saveDiv2{
        width:1000px;
        margin: 0 auto;
        margin-top: 10px;
    }
    .saveDiv .saveDiv3{
        width: 200px;
        margin: 0 auto;
    }
    .detailDiv{
        width:1000px;
        margin:0 auto;
        margin-top:25px;
    }
    .divbtn1{
        width: 1000px;
        margin: 20px 0px 0px 0px;
    }
    .divbtn1  .but{
        float: right;
    }

</style>